<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定银行卡</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!--避免数字被识别为电话号码，变成蓝色-->
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="library/css/layer.css">
    <link rel="stylesheet" href="library/css/ZTooltip.css">
    <link rel="stylesheet" href="css/initialization.css">
    <link rel="stylesheet" href="css/bindCard/bindCard.css">
    <link rel="stylesheet" href="css/bindCard/tooltip.css">
</head>
<body>
<div class="container">
    <div class="phoneDiv">
        <div>
        <div class="phoneContent">手机号码</div>
        <div id="phoneNumber"></div>
        </div>
    </div>
    <div class="content">
        <div class="item">
            <span class="title">姓名</span>
            <input data-tooltip="show" data-content="This is a button!" id="userName" placeholder="请输入您的真实姓名">
            <div class="toolTip hide">
                <span class="bot"></span>
                <span class="top"></span>
                姓名不能为空！
            </div>
        </div>
        <div class="item">
            <span class="title">身份证号</span>
            <input id="ID"  placeholder="请输入您的身份证号码" userpattern="(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)">
            <div class="toolTip hide">
                <span class="bot"></span>
                <span class="top"></span>
                请输入15位或18位身份证号码！
            </div>
        </div>
        <div class="item">
            <span class="title">开户银行</span>
           <!-- <input id="userBand" placeholder="请输入您的开户银行">-->
            <span class="dropDown" id="userBand"><span class="dropDownMsg">请输入您的开户银行</span><img src="images/card_sign_down.png"/></span>
        </div>
        <div class="item">
            <span class="title">银行卡号</span>
            <input id="bankNumber"  placeholder="请输入您的银行卡号" userpattern="(^\d{16}$)|(^\d{19}$)">
            <div class="toolTip hide">
                <span class="bot"></span>
                <span class="top"></span>
                请输入16位或19位银行卡号！
            </div>
        </div>
        <div class="item">
            <span class="title">支付密码</span>
            <input id="password" type="password"  placeholder="请输入您的支付密码" userpattern="(^[\S]{6,}$)" >
            <div class="toolTip hide">
                <span class="bot"></span>
                <span class="top"></span>
                请输入不低于6位非空白支付密码！
            </div>
        </div>
        <div class="item">
            <span class="title">开户省市</span>
            <!--<input id="area" placeholder="请选择">-->
            <span class="dropDown" id="area"><span class="dropDownMsg">请选择</span><img src="images/card_sign_down.png"/></span>
        </div>

    </div>

    <div class="commit">
        <div>
        <button id="commit">提交</button>
        </div>
    </div>

</div>

<script type="text/template" id="bankTemp">
    <ul class="bank">
        <%for(var i=0;i < data.length ;i++){%>
        <li class="bankItem" bankCode="<%= data[i].bankCode %>" bankname="<%= data[i].bankName %>">
            <%= data[i].bankName %>
        </li>
        <%}%>
    </ul>
</script>

<script type="text/template" id="provinceTemp">
    <ul class="area">
        <%for(var i=0;i < data.length ;i++){%>
        <li class="proItem" proCode="<%= data[i].proCode %>" proName="<%= data[i].proName %>">
            <%= data[i].proName %>
        </li>
        <%}%>
    </ul>
</script>

<script type="text/template" id="cityTemp">
    <ul class="city">
        <%for(var i=0;i < data.length ;i++){%>
        <li class="cityItem" cityCode="<%= data[i].cityCode %>" cityName="<%= data[i].cityName %>">
            <%= data[i].cityName %>
        </li>
        <%}%>
    </ul>
</script>
<script src="library/js/zepto.min.js"></script>
<script src="library/js/underscore-min.js"></script>
<script src="library/js/layer.js"></script>
<script src="library/js/hmac-sha1.js"></script>
<script src="library/js/md5.js"></script>
<script src="library/js/enc-base64-min.js"></script>
<script src="js/bindCard/bindCard.js?v20160829001"></script>
<script src="js/Common.js?v20160829001"></script>
<script src="js/bindCard/Init.js?v20160829001"></script>
<script src="js/bindCard/DataOperation.js?v20160829001"></script>
<script src="js/CallApp.js?v20160829001"></script>
<script src="library/js/EncryptedOperation.js"></script>
</body>
</html>